<template>
<div>
  <h4>用户管理</h4>
  <div class="search">
    <CommonForm
      :form="searchForm"
      :form-label="searchLabel"
      :form-config="searchConfig"
    >

      <el-button type="primary" icon="el-icon-search" class="float-btn" @click="searchCommit(searchForm)">检索</el-button>
    </CommonForm>
  </div>
  <div class="table">
    <CommonTable style="height: 400px"
                       :table-data="tableData"
                       :table-label="tableLabel"
                       :table-config="tableConfig"
                       @sizeChange="getData(1, tableConfig.size, {})"
                       @currentPage="getData(tableConfig.page, tableConfig.size, {})"
    ></CommonTable>
  </div>
</div>
</template>

<script>
import CommonForm from "@/components/common/CommonForm";
import CommonTable from "@/components/common/CommonTable";
import {getUser} from  "@/api/electricity/userManage"


export default {
  name: "userManage",
  components: {CommonTable, CommonForm},
  beforeMount(){
    this.getData(1,10);
  },
  data(){
    return{
      // -----------检索部分
      //检索的表单
      searchForm: {
        keyword:'',//关键字
        campusId: "",//校区
        schoolName:"",//学校
        buildingID: "",//楼栋
      },
      //检索表单标签
      searchLabel: [
        {
          model: "keyword",
          label:'关键字',
          labelWidth: '55px',
        },
        {
          model: "schoolCampus",
          type: 'campusCascader',
          label: "学校/校区",
          labelWidth: '75px',
          //可以跨级选择
          props: {checkStrictly: true},
        },
        {
          model: 'buildingID',
          label: '楼栋',
          type: 'buildingSelect',
        },
      ],
      //表单配置
      searchConfig: {
        labelWidth: "40px",
        inline: true,
        labelPosition: "left",
      },
      //表格部分
      tableData:[{
        phone:'1',//手机号
        schoolName:'1',//学校名称
        campusName:'1',//校区名称
        buildingName:'1',//楼栋名称
        roomNumber:'1',//房间号
        equipmentIdentifier:'1',//设备id
        balance:'1',//账户余额
        remark:'1',//备注
        // appUserId:'',//app端用户id
      }],
      tableLabel:[
        {
          prop:'phone',
          label:'手机号'
        },
        {
          prop:'schoolName',
          label:'学校'
        },
        {
          prop:'campusName',
          label:'校区'
        },
        {
          prop:"buildingName",
          label: '楼栋'
        },
        {
          prop:"roomNumber",
          label: '房间号'
        },
        {
          prop:"equipmentIdentifier",
          label: '绑定设备ID'
        },
        {
          prop:"balance",
          label: '账户余额',
          type:'money'
        },
        {
          prop:"remark",
          label: '备注'
        }
      ],
      tableConfig:{
        isShowLoading:true,
        //当前页
        page:1,
        total:30,
        //单页条目
        size:10,
        loading:false
      }
    }
  },
  methods:{
    searchCommit(Form){
      const Data = {};
      if ('schoolCampus'in Form){
        let [schoolName,campusId] =Form.schoolCampus||[];
        Data.campusId = campusId?campusId:'';
        Data.schoolName = schoolName;
      }
      for (let i in Form) {
        //排除空元素；
        if (Form[i] !== "") {
          if (i==='schoolCampus'){continue;}
          Data[i] = Form[i];
        }
      }
      console.log(Data);
    },
    getData(page,pageSize,appUserQuery) {
      getUser(page,pageSize,appUserQuery).then(res=>{
        const result = res.data;
        if (result.code == '200'){
          this.tableData = result.data.records;
          this.tableConfig.total = result.data.total;
          this.tableConfig.size = result.data.size;
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
